<template>
  <div>
    <div class="hmtop" style="margin-right:30px">
      <!--顶部导航条 -->
      <div class="am-container header">
        <ul class="message-l">
          <div class="topMessage">
            <div v-if="!nickname" class="menu-hd">
              <router-link :to="{name:'login'}" target="_top" class="h">
                亲，请登录
              </router-link>
              <a href="#" target="_top">免费注册</a>
            </div>
            <div v-if="nickname" class="menu-hd">
              <router-link :to="{name:'admin'}" target="_top" class="h">
                {{nickname}}
              </router-link>
            </div>
          </div>
        </ul>
        <ul class="message-r">
          <div class="topMessage home">
            <div class="menu-hd">
              <router-link :to="{name:'home'}">
                商城首页
              </router-link>
            </div>
          </div>
          <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng">
              <router-link :to="{name:'user'}">
                <i class="am-icon-user am-icon-fw"></i>个人中心
              </router-link>
            </div>
          </div>
          <div class="topMessage mini-cart">
            <div class="menu-hd">
              <router-link :to="{name:'shopcart'}">
                <i class="am-icon-shopping-cart am-icon-fw"></i>
                <span>购物车</span>
                <strong id="J_MiniCartNum" class="h"></strong>
              </router-link>
            </div>
          </div>
          <div class="topMessage favorite">
            <div class="menu-hd">
              <router-link :to="{name:'collect'}">
                <i class="am-icon-heart am-icon-fw"></i>
                <span>收藏夹</span>
              </router-link>
            </div>
          </div>
          <div class="topMessage favorite" v-if="nickname">
            <div class="menu-hd" @click="quit()">
                <a href="javascript:;;">注销</a>
            </div>
          </div>
        </ul>
      </div>

      <!--悬浮搜索框-->
      <div class="nav white" style="width:white;max-width:1200px">
        <div class="logoBig">
          <router-link :to="{name:'home'}">
            <img src="/src/assets/img/logo.png" style="width:150px">
          </router-link>
        </div>

        <div class="search-bar pr">
          <a name="index_none_header_sysc" href="#"></a>
          <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="请输入搜索关键词" autocomplete="off" v-model="searchWord">
            <input id="ai-topsearch" class="am-btn" value="搜索" index="1" type="button" v-on:click="search()">
          </form>
        </div>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'myheader',
  data () {
    return {
      nickname: null,
      searchWord: "",
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      var nickname = localStorage.getItem("NICKNAME");
      if (nickname != null) {
        this.nickname = nickname
      } else {
        this.nickname = null
      }
    },
    search () {
      var seo = this.searchWord;
      this.$router.push({
        path: '/search',
        name: 'search',
        params: {
          seo: seo
        }
      })
    },
    quit() {
      this.axios.get("/user/quit");
      localStorage.removeItem("NICKNAME");
      localStorage.removeItem("AUTHTOKEN");
      localStorage.removeItem("schoolId");
       this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>
<style scoped>
@import "/src/AmazeUI-2.4.2/assets/css/admin.css";
@import "/src/AmazeUI-2.4.2/assets/css/amazeui.css";
@import "/src/assets/css/demo.css";
/* @import "/src/assets/css/optstyle.css"; */
/* @import "/src/assets/css/hmstyle.css"; */
/* @import "/src/assets/css/skin.css"; */
@import "/src/assets/css/common/commonFont.css";
</style>
